<template>
  <div id="league">
    <div class="container">
      <div class="table">
        <el-table
                ref="multipleLeagues"
                :data="leagues"
                tooltip-effect="dark"
                style="width: 100%"
                height="550"
                @selection-change="handleSelectionChange">
          <el-table-column
                  fixed
                  type="selection"
                  width="55">
          </el-table-column>
          <el-table-column

                  type="index"
                  label="序号"
                  width="150"
                  :index="indexMethod">
          </el-table-column>

          <el-table-column
                  prop="league"
                  label="高校联盟"
                  width="150">
          </el-table-column>

          <el-table-column
                  prop="number985"
                  label="985数量"
                  width="120">
          </el-table-column>

          <el-table-column
                  prop="number211"
                  label="211数量"
                  width="120">
          </el-table-column>

          <el-table-column
                  prop="city"
                  label="学校成员"
                  width="500">
            <template slot-scope="scope">
              <!--{{scope.row.colleges}}-->
              <ul>
                <li v-for="league in scope.row.colleges" @click="mapClick(league.index)"><img :src="league.img" alt="">
                </li>
              </ul>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top: 20px;text-align: center">
        <el-button @click="leagueMapClick" type="primary">联盟图</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {leagues} from "../../assets/js/leagues";
  import {colleges} from "../../assets/js/college";

  export default {
    name: "League",
    data() {
      return {
        leagues: [],
        leagueMap: []
      }
    },
    mounted() {
      let map = new Map()
      leagues.forEach((league, index) => {
        this.leagues.push({
          index: index,
          league: league,
          number985: 0,
          number211: 0,
          colleges: []
        })
        map.set(league, index)
      })
      colleges.forEach(college => {
        college.league.forEach(league => {
          let index = map.get(league)
          if (college.is985) {
            this.leagues[index].number985 += 1
          } else {
            this.leagues[index].number211 += 1
          }
          this.leagues[index].colleges.push(college)
        })
      })
    },
    methods: {
      indexMethod(index) {
        return index
      },

      mapClick(index) {
        this.$emit('nav-change', 0)
        this.$router.push({
          path: '/universities',
          query: {
            index: index
          }
        })
      },

      toggleSelection() {
        this.$refs.multipleLeagues.clearSelection();
      },

      handleSelectionChange(val) {
        val.forEach(item => {
          this.leagueMap.push(item.index)
        })
      },

      leagueMapClick() {
        this.$router.push({
          path: '/league-map',
          query: {
            leagueMap: this.leagueMap
          }
        })
      }
    }
  }
</script>

<style scoped>
  #league {
    height: 100%;
    background-image: url("http://115.159.66.213:8000/word.png");
    background-repeat: no-repeat;
    background-size: 100%, 100%;
  }

  .container {
    height: 80%;
    background-color: #f2f2f2;
    margin: 0 300px;
    padding: 50px 50px;
    opacity: 0.95;
  }

  .table {
    background-color: #237aeb;
  }

  li {
    width: 50px;
    height: 50px;
    float: left;
    margin-left: 10px;
    margin-top: 10px;
  }

  img {
    width: 100%;
    height: 100%;
    border-radius: 50px;
  }
</style>